<template>
  <div>
    <div v-for="(sub, i) in node.subclass " class="custom-control custom-control-inline mt-1 mb-1 sc" :key="sub">
      <div class="input-group-prepend">
        <span class="input-group-text subLabel">{{sub}}</span>
      </div>
      <div class="input-group-prepend">
        <button type="button" class="btn btn-outline-secondary dropdown-toggle hLine btnMenu" data-toggle="dropdown">
          {{labels[i]}}
        </button>
        <div class="dropdown-menu">
          <div v-for="(e, j) in node.options" class="dropdown-item" @click="selItem(i, j)" :key="e.text">
            {{e.text}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as Util from '../js/util';

export default {
  name: 'UIArray',
  props: ['node'],
  data () {
    return {
      selIndexs: Util.memset(this.node.subclass.length, 0),
      labels: Util.memset(this.node.subclass.length, ''),
      cacheL: this.node.options.reduce(function (a, b) { a[b.text] = b.value; return a; }, {}),
      cacheV: this.node.options.reduce(function (a, b) { a[b.value] = b.text; return a; }, {}),
    }
  },
  mounted: function () {
    var len = this.node.subclass.length;
    var $this = this, d = this.node.parent[this.node.name];
    if ((typeof d)!=='object') d = Util.memset(len, d);
    this.labels = d.map(function (e) { return $this.cacheV[e]; } );
  },
  methods: {
    selItem: function (i, j) {
      var $this = this;
      this.selIndexs[i] = j;
      this.$set(this.labels, i, this.node.options[j].text); // 切记数组更新检测
      var values = this.labels.map(function (e) { return $this.cacheL[e]; });
      this.$emit('childChange', values);
    }
  }
}

</script>

<style scoped>
  .hLine { height: 25px; line-height: 25px; font-size: 14px }
  .btnMenu { padding-top: 0px; padding-bottom: 0px;  }
  div.dropdown-item { font-size: 14px }
  .subLabel { padding: 1px .75rem; line-height: 1em; font-size: 14px; }
  .sc { padding-left: 2px; padding-right: 2px; margin-right: 5px }
</style>
